import { observer } from 'mobx-react-lite'
import { Button, Form, Input, message } from 'antd'
import React from 'react'
import './style.scss'
import { layout, tailLayout } from '@/utils/contants'
import { addAdminRequest } from '@/apis/admin'
import { phoneRule } from '@/utils/formRules'
const AddAdmin: React.FC = () => {
	const [form] = Form.useForm()
	const onFinish = (value: any) => {
		addAdminRequest(value).then((res: any) => {
			message.success(res.message)
			form.resetFields()
		})
	}

	return <div className="addAdminWrap">
		<Form form={form} {...layout} onFinish={onFinish}>
			<Form.Item label="用户名" name="username" rules={[{ required: true, message: '请输入用户名' }]}>
				<Input />
			</Form.Item>
			<Form.Item label="密码" name="password" rules={[{ required: true, message: '请输入密码' }]}>
				<Input.Password />
			</Form.Item>
			<Form.Item label="电话" name="phone" rules={[phoneRule]}>
				<Input />
			</Form.Item>
			<Form.Item label="楼栋" name="building" rules={[{ required: true, message: '请选择楼栋' }]}>
				<Input />
			</Form.Item>
			<Form.Item {...tailLayout}>
				<Button type="primary" htmlType="submit">
					添加
				</Button>
				<Button htmlType="button" onClick={() => form.resetFields()}>
					重置
				</Button>
			</Form.Item>
		</Form>
	</div>
}

export default observer(AddAdmin)